<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>
	<title>CrudJSF</title>
	
	<link href="#{facesContext.externalContext.requestContextPath}/resources/css/site/style.css" rel="stylesheet" type="text/css" />
	<link href="#{facesContext.externalContext.requestContextPath}/resources/css/site/navi.css" rel="stylesheet" type="text/css" />
	<link href="#{facesContext.externalContext.requestContextPath}/resources/css/tooltip.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/css/site/js/jquery-1.7.2.min.js"></script>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript">
		$(function() {
			$(".box .h_title").not(this).next("ul").hide("normal");
			$(".box .h_title").not(this).next("#home").show("normal");
			$(".box").children(".h_title").click(function() {
				$(this).next("ul").slideToggle();
			});
		});
	</script>

	<h:outputScript library="javascript" name="jscodes.js" />

</h:head>

<h:body>
	<f:view contentType="text/html; charset=UTF-8" encoding="UTF-8">
		<div class="wrap">
			<div id="header">
				<div id="top">
					<div class="left">
						<p>
							Welcome, <strong>#{userMB.user.name}</strong> [ <a href="">logout</a> ]
							<p:commandButton value="#{bundle.logOut}" action="#{userMB.logOut()}" ajax="false" style="font-size: 20px;" />
						</p>
					</div>
					<div class="right">
						<div class="align-right">
							<p>
								Last login: <strong>23-04-2012 23:12</strong>
							</p>
						</div>
					</div>
				</div>
				<div id="nav">
					<ul>
						<li class="upp"><a href="#">Main control</a>
							<ul>
								<li>&#8250; <a href="">Visit site</a></li>
								<li>&#8250; <a href="">Reports</a></li>
								<li>&#8250; <a href="">Add new page</a></li>
								<li>&#8250; <a href="">Site config</a></li>
							</ul></li>
						<li class="upp"><a href="#">Manage content</a>
							<ul>
								<li>&#8250; <a href="">Show all pages</a></li>
								<li>&#8250; <a href="">Add new page</a></li>
								<li>&#8250; <a href="">Add new gallery</a></li>
								<li>&#8250; <a href="">Categories</a></li>
							</ul></li>
						<li class="upp"><a href="#">Users</a>
							<ul>
								<li>&#8250; <a href="allusers.xhtml">Show all users</a></li>
								<li>&#8250; <a href="">Add new user</a></li>
								<li>&#8250; <a href="">Lock users</a></li>
							</ul></li>
						<li class="upp"><a href="#">Settings</a>
							<ul>
								<li>&#8250; <a href="">Site configuration</a></li>
								<li>&#8250; <a href="">Contact Form</a></li>
							</ul></li>
					</ul>
				</div>
			</div>

			<div id="content">
				<div id="sidebar">
					<div class="box">
						<div class="h_title">&#8250; Main control</div>
						<ul id="home">
							<li class="b1"><a class="icon view_page" href="">Visit
									site</a></li>
							<li class="b2"><a class="icon report" href="">Reports</a></li>
							<li class="b1"><a class="icon add_page" href="">Add new
									page</a></li>
							<li class="b2"><a class="icon config" href="">Site
									config</a></li>
						</ul>
					</div>

					<div class="box">
						<div class="h_title">&#8250; Manage content</div>
						<ul>
							<li class="b1"><a class="icon page" href="">Show all
									pages</a></li>
							<li class="b2"><a class="icon add_page" href="">Add new
									page</a></li>
							<li class="b1"><a class="icon photo" href="">Add new
									gallery</a></li>
							<li class="b2"><a class="icon category" href="">Categories</a></li>
						</ul>
					</div>
					<div class="box">
						<div class="h_title">&#8250; Users</div>
						<ul>
							<li class="b1"><a class="icon users" href="allusers.xhtml">Show all
									users</a></li>
							<li class="b2"><a class="icon add_user" href="">Add new
									user</a></li>
							<li class="b1"><a class="icon block_users" href="">Lock
									users</a></li>
						</ul>
					</div>
					<div class="box">
						<div class="h_title">&#8250; Settings</div>
						<ul>
							<li class="b1"><a class="icon config" href="">Site
									configuration</a></li>
							<li class="b2"><a class="icon contact" href="">Contact
									Form</a></li>
						</ul>
					</div>
				</div>
				<div id="main">
					
					<div class="clear"></div>

					<div class="full_w">
						<div class="h_title">Paragraph, headers, lists, notify</div>
						<h1>Level 1 header</h1>
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
							sed diam nonumyeirmod tempor invidunt ut labore et dolore magna
							aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo
							duo dolores et ea rebum. Stet clita kasd gubergren, no sea takim</p>
						<h2>Level 2 header</h2>
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
							sed diam nonumyeirmod tempor invidunt ut labore et dolore magna
							aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo
							duo dolores et ea rebum. Stet clita kasd gubergren, no sea
							takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor
							sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod
							tempor i</p>
						<h3>Level 3 header</h3>
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
							sed diam nonumyeirmod tempor invidunt ut labore et dolore magna
							aliquyam erat, sed diamvolupt</p>
						<h3>Unordered list</h3>
						<ul>
							<li>first list item, Lorem ipsum dolor sit amet, consete</li>
							<li>second list item, Lorem ipsum dolor sit amet, consete</li>
							<li>third list item, Lorem ipsum dolor sit amet, consete</li>
							<li>fourth list item, Lorem ipsum dolor sit amet, consete</li>
						</ul>
						<h3>Ordered list</h3>
						<ol>
							<li>first list item, Lorem ipsum dolor sit amet, consete</li>
							<li>second list item, Lorem ipsum dolor sit amet, consete</li>
							<li>third list item, Lorem ipsum dolor sit amet, consete</li>
							<li>fourth list item, Lorem ipsum dolor sit amet, consete</li>
						</ol>
						<div class="n_warning">
							<p>Attention notification. Lorem ipsum dolor sit amet,
								consetetur, sed diam nonumyeirmod tempor.</p>
						</div>
						<div class="n_ok">
							<p>Success notification. Lorem ipsum dolor sit amet,
								consetetur, sed diam nonumyeirmod tempor.</p>
						</div>
						<div class="n_error">
							<p>Error notification. Lorem ipsum dolor sit amet,
								consetetur, sed diam nonumyeirmod tempor.</p>
						</div>
					</div>

					<div class="full_w">
						<div class="h_title">Add new page - form elements</div>
						<form action="" method="post">
							<div class="element">
								<label for="name">Page title <span class="red">(required)</span></label>
								<input id="name" name="name" class="text err" />
							</div>
							<div class="element">
								<label for="category">Category <span class="red">(required)</span></label>
								<select name="category" class="err">
									<option value="0">-- select category</option>
									<option value="1">Category 1</option>
									<option value="2">Category 4</option>
									<option value="3">Category 3</option>
								</select>
							</div>
							<div class="element">
								<label for="comments">Comments</label> <input type="radio"
									name="comments" value="on" checked="checked" /> Enabled <input
									type="radio" name="comments" value="off" /> Disabled
							</div>
							<div class="element">
								<label for="attach">Attachments</label> <input type="file"
									name="attach" />
							</div>
							<div class="element">
								<label for="content">Page content <span>(required)</span></label>
								<textarea name="content" class="textarea" rows="10"></textarea>
							</div>
							<div class="entry">
								<button type="submit">Preview</button>
								<button type="submit" class="add">Save page</button>
								<button class="cancel">Cancel</button>
							</div>
						</form>
					</div>

					<div class="full_w">
						<div class="h_title">Manage pages - table</div>
						<h2>Lorem ipsum dolor sit ame</h2>
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
							sed diam nonumyeirmod tempor invidunt ut labore et dolore magna
							aliquyam erat, sed diamvolupt</p>

						<div class="entry">
							<div class="sep"></div>
						</div>
						<table>
							<thead>
								<tr>
									<th scope="col">ID</th>
									<th scope="col">Title</th>
									<th scope="col">Author</th>
									<th scope="col">Date</th>
									<th scope="col">Category</th>
									<th scope="col" style="width: 65px;">Modify</th>
								</tr>
							</thead>

							<tbody>
								<tr>
									<td class="align-center">2</td>
									<td>Home</td>
									<td>Pawel B.</td>
									<td>22-03-2012</td>
									<td>-</td>
									<td><a href="#" class="table-icon edit" title="Edit"></a>
										<a href="#" class="table-icon archive" title="Archive"></a> <a
										href="#" class="table-icon delete" title="Delete"></a></td>
								</tr>
								<tr>
									<td class="align-center">3</td>
									<td>Our offer</td>
									<td>Pawel B.</td>
									<td>22-03-2012</td>
									<td>-</td>
									<td><a href="#" class="table-icon edit" title="Edit"></a>
										<a href="#" class="table-icon archive" title="Archive"></a> <a
										href="#" class="table-icon delete" title="Delete"></a></td>
								</tr>

								<tr>
									<td class="align-center">5</td>
									<td>About</td>
									<td>Admin</td>
									<td>23-03-2012</td>
									<td>-</td>
									<td><a href="#" class="table-icon edit" title="Edit"></a>
										<a href="#" class="table-icon archive" title="Archive"></a> <a
										href="#" class="table-icon delete" title="Delete"></a></td>
								</tr>

								<tr>
									<td class="align-center">12</td>
									<td>Contact</td>
									<td>Admin</td>
									<td>25-03-2012</td>
									<td>-</td>
									<td><a href="#" class="table-icon edit" title="Edit"></a>
										<a href="#" class="table-icon archive" title="Archive"></a> <a
										href="#" class="table-icon delete" title="Delete"></a></td>
								</tr>
								<tr>
									<td class="align-center">114</td>
									<td>Portfolio</td>
									<td>Pawel B.</td>
									<td>22-03-2012</td>
									<td>-</td>
									<td><a href="#" class="table-icon edit" title="Edit"></a>
										<a href="#" class="table-icon archive" title="Archive"></a> <a
										href="#" class="table-icon delete" title="Delete"></a></td>
								</tr>

								<tr>
									<td class="align-center">116</td>
									<td>Clients</td>
									<td>Admin</td>
									<td>23-03-2012</td>
									<td>-</td>
									<td><a href="#" class="table-icon edit" title="Edit"></a>
										<a href="#" class="table-icon archive" title="Archive"></a> <a
										href="#" class="table-icon delete" title="Delete"></a></td>
								</tr>

								<tr>
									<td class="align-center">131</td>
									<td>Customer reviews</td>
									<td>Admin</td>
									<td>25-03-2012</td>
									<td>-</td>
									<td><a href="#" class="table-icon edit" title="Edit"></a>
										<a href="#" class="table-icon archive" title="Archive"></a> <a
										href="#" class="table-icon delete" title="Delete"></a></td>
								</tr>
							</tbody>
						</table>
						<div class="entry">
							<div class="pagination">
								<span>« First</span> <span class="active">1</span> <a href="">2</a>
								<a href="">3</a> <a href="">4</a> <span>...</span> <a href="">23</a>
								<a href="">24</a> <a href="">Last »</a>
							</div>
							<div class="sep"></div>
							<a class="button add" href="">Add new page</a> <a class="button"
								href="">Categories</a>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>

			<div id="footer">
				<div class="left">
					<p>
						Design: <a href="http://kilab.pl">Pawel Balicki</a> | Admin Panel:
						<a href="">YourSite.com</a>
					</p>
				</div>
				<div class="right">
					<p>
						<a href="">Example link 1</a> | <a href="">Example link 2</a>
					</p>
				</div>
			</div>
		</div>

	</f:view>
</h:body>
</html>